<template>
  <basic-container>
    <div style="float: right;color: green;font-size: 22px">
      <h6>昨日数据已更新时区:{{ timezone }}</h6>
    </div>
    <div style="margin-bottom: 2em">
      <el-button id="id-datareport-costreport-exportData"
                 type="primary" icon="el-icon-download" size="small" @click="exportData">导出
      </el-button>
      <a id="exportLink"></a>
      <el-button v-if="roles.admin||roles.optimizer||roles.agc_sales_manager||roles.agc_customer_manager" type="primary"
                 style="margin-left: 2em" size="small" @click="exportSwitch=!exportSwitch"> 定制报表
      </el-button>
    </div>
    <el-tabs v-model="activeName" class="report_tap" type="card" @tab-click="handleClick">
      <el-tab-pane label="订单" name="offer" v-loading="loading">
        <div class="report">
          <!-- 标题-->
          <div class="report-title" style="padding: 0 20px;border-bottom: 1px solid #E8E8E8">
            <div style="display: flex;">
              <div style="width: 24px; text-align: left;"></div>
              <div v-for="(item,index) in offerList.dateList" :key="index" class="report-title-date"
                   :style="{width:index === 0 ? '15%' : 'calc(80%/8)', textAlign: index === 0?'left':'left'}">
                <div style="color: black;display: flex" v-if="index==0">
                  {{ item }}
                  <div style="width: 10px;min-height: 100%;flex-direction:column"></div>
                </div>
                <div style="color: black;display: flex" v-else-if="index==2">
                  <div style="width: 10px;min-height: 100%;flex-direction:column"></div>
                  <div style="display: flex;color: black;justify-content: center">
                    {{ item }}
                  </div>
                </div>
                <div style="color: black;" v-else>
                  <div style="display: flex;color: black;justify-content: center">
                    <div style="margin-top:1px;" v-if="index==1">
                      <el-tooltip content='今日数据每小时更新' :placement="top">
                        <el-image
                          style="width: 13px; height: 13px"
                          :src="images"
                          :fit="fit">
                        </el-image>
                      </el-tooltip>
                    </div>
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </div>


          <!-- 数值-->
          <div v-for="(item,index) in lists" :key="index" style="padding: 0 20px;border-bottom: 1px solid #E8E8E8">
            <div style="display: flex">
              <div style="width: 24px; text-align: left;color: #0073eb;">{{ index + 1 }}</div>
              <div style="width: 15%;text-align: left">
                <a href="javascript:void(0)" @click="openOcPage(item.offerid,'offer')">{{ item.nameList }}</a>
              </div>
              <div v-for="(ite,ind) in lists[index].value" :key="ind"
                   :style="{color: lists[index].open=='1' && ind  ===1 ? color : '' }"
                   :class="ind  ===1 ? 'cost-offer-border-left':'cost-offer-border'">
                <div style="display: flex">
                  <div :style="{backgroundColor:  ind  ===1 ? yesterdayColor(ite) : ''}"
                       style="width: 10px;min-height: 100%;flex-direction:column;"></div>
                  &nbsp;{{ refinedNumberView(ite) }}&nbsp;
                  <div style="margin-top:1px;">
                    <el-tooltip :disabled="lists[index].open=='1' && ind  ===1? false: true"
                                :content="lists[index].open=='1' && ind  ===1?'订单数据未更新完成':''" placement="top">
                      <el-image
                        v-if="lists[index].open=='1' && ind  ===1"
                        style="width: 13px; height: 13px"
                        :src="images"
                        :fit="fit">
                      </el-image>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 总计-->
          <div style="padding: 0 20px;border-bottom: 1px solid #E8E8E8">
            <div style="display: flex;font-weight: bold;">
              <div style="width: 24px; text-align: left;color: #0073eb;"></div>
              <div v-for="(item,index) in offerList.dateTotalList" :key="index" class="report-bottom-data"
                   :style="{width:index === 0 ? '15%' : 'calc(80%/8)', textAlign: index === 0?'left':'left'}">
                <div v-if="index==0">{{ item }}</div>
                <div style="display: flex" :style="{justifyContent: index === 2?'flex-start':'center'}" v-else>
                  <div style="width: 10px;min-height: 100%;flex-direction:column"></div>
                  &nbsp;{{ refinedNumberView(item) }}&nbsp;
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="代理商" name="agency" v-loading="loading" v-if="roles.view_agency">
        <div class="report">
          <!-- 标题-->
          <div class="report-title">
            <div style="display: flex;">
              <div style="width: 24px; text-align: left; color: #0073eb;"></div>
              <div style="width: 20px;min-height: 100%;flex-direction:column"></div>
              <div style="color: black" class="report-title-date" :style="{width:index === 0 ? '15%' : 'calc(80%/8)'}"
                   v-for="(item,index) in operatorList.dateList" :key="index">
                <div style="color: black;">
                  <div style="display: flex;color: black;justify-content: center">
                    <div style="margin-top:1px;" v-if="index==1">
                      <el-tooltip content='今日数据每小时更新' :placement="top">
                        <el-image
                          style="width: 13px; height: 13px"
                          :src="images"
                          :fit="fit">
                        </el-image>
                      </el-tooltip>
                    </div>
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 数值-->
          <div v-for="(item,index) in operatorList.nameList" :key="index"
               style="padding: 0 20px;border-bottom: 1px solid #E8E8E8">
            <div style="display: flex">
              <div style="width: 24px; text-align: center;color: #0073eb;">{{ index + 1 }}</div>
              <div style="width: 15%;text-align: center">{{ item }}</div>
              <div class="cost-offer-border" :key="ind" v-for="(ite,ind) in operatorList.costList[index]"
              >{{ refinedNumberView(ite) }}
              </div>
            </div>
          </div>
          <!-- 总计-->
          <div style="display: flex;margin-top: 3px;padding: 0 20px;font-weight: bold;">
            <div style="width: 24px; text-align: left;color: #0073eb;"></div>
            <div class="report-bottom-data"
                 :style="{width:index === 0 ? '15%' : 'calc(80%/8)', textAlign: 'center'}"
                 v-for="(item,index) in operatorList.dateTotalList" :key="index">
              {{ index == 0 ? item : refinedNumberView(item) }}
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="运营人" name="operator" v-loading="loading" v-if="roles.admin">
        <div class="report">
          <!-- 标题-->
          <div class="report-title">
            <div style="display: flex;">
              <div style="width: 24px; text-align: left; color: #0073eb;"></div>
              <div style="width: 20px;min-height: 100%;flex-direction:column"></div>
              <div style="color: black" class="report-title-date" :style="{width:index === 0 ? '15%' : 'calc(80%/8)'}"
                   v-for="(item,index) in operatorList.dateList" :key="index">
                <div style="color: black;">
                  <div style="display: flex;color: black;justify-content: center">
                    <div style="margin-top:1px;" v-if="index==1">
                      <el-tooltip content='今日数据每小时更新' :placement="top">
                        <el-image
                          style="width: 13px; height: 13px"
                          :src="images"
                          :fit="fit">
                        </el-image>
                      </el-tooltip>
                    </div>
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 数值-->
          <div v-for="(item,index) in operatorList.nameList" :key="index"
               style="padding: 0 20px;border-bottom: 1px solid #E8E8E8">
            <div style="display: flex">
              <div style="width: 24px; text-align: center;color: #0073eb;">{{ index + 1 }}</div>
              <div style="width: 15%;text-align: center">{{ item }}</div>
              <div class="cost-offer-border" :key="ind" v-for="(ite,ind) in operatorList.costList[index]"
              >{{ refinedNumberView(ite) }}
              </div>
            </div>
          </div>
          <!-- 总计-->
          <div style="display: flex;margin-top: 3px;padding: 0 20px;font-weight: bold;">
            <div style="width: 24px; text-align: left;color: #0073eb;"></div>
            <div class="report-bottom-data"
                 :style="{width:index === 0 ? '15%' : 'calc(80%/8)', textAlign: 'center'}"
                 v-for="(item,index) in operatorList.dateTotalList" :key="index">
              {{ index == 0 ? item : refinedNumberView(item) }}
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="运营人-订单" name="offerInOpSum" v-loading="loading">
        <div class="report">
          <!-- 标题-->
          <div>
          </div>
          <div class="report-title">
            <div style="display: flex;">
              <div style="color: black" class="report-title-date"
                   :style="{width:index == 0 ? '15%' : 'calc(80%/8)', textAlign: index === 0?'center':'left'}"
                   v-for="(item,index) in offerInOpSumList.dateList" :key="index">
                <div style="display: flex;color: black; justify-content: center">
                  <div v-if="index==0">运营人订单</div>
                  <div style="margin-top:1px;" v-if="index==1">
                    <el-tooltip content='今日数据每小时更新' :placement="top">
                      <el-image
                        style="width: 13px; height: 13px"
                        :src="images"
                        :fit="fit">
                      </el-image>
                    </el-tooltip>
                  </div>
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
          <!-- 数值-->
          <div v-for="(item,index) in offerInOpSumList.offerInOp" :key="index">
            <!--优化师-->
            <div style="margin-top: 20px;color: black;background-color: #f9f8cf">
              <div style="display: flex;padding: 0">
                <div
                  style="width: 15%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top:1px solid #E8E8E8;color: #00a2ff">
                  {{ item.label }}
                </div>
                <div class="cost-offer-border" :style="{borderRight: i== 8?' 1px solid #E8E8E8':'1px solid white'}"
                     style="border-bottom: 1px solid #E8E8E8;border-top:1px solid #E8E8E8 ; " :key="i"
                     v-for="(it,i) in item.value.opDateTotalList ">
                  {{ refinedNumberView(it) }}
                </div>
              </div>
            </div>
            <!--offer-->
            <div v-for="(ite,ind) in item.value.nameList" :key="ind" style="display: flex;padding: 0;">
              <div
                style="width: 15%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8">
                {{ ite }}
              </div>
              <div :style="{borderRight: i== 8?' 1px solid #E8E8E8':'1px solid white'}" class="cost-offer-border"
                   style="border-bottom: 1px solid #E8E8E8;" :key="i" v-for="(it,i) in item.value.costList[ind] ">
                {{ refinedNumberView(it) }}
              </div>
            </div>
          </div>
          <!-- 总计-->
          <div style="display: flex;margin-top: 3px;padding: 0;font-weight: bold;">
            <div class="report-bottom-data"
                 :style="{width:index === 0 ? '15%' : 'calc(80% / 8)', textAlign: 'center'}"
                 v-for="(item,index) in offerInOpSumList.dateTotalList" :key="index">{{ refinedNumberView(item) }}
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="运营人-账户" name="platformIdInOpSum" v-loading="loading">
        <div class="report">
          <!-- 标题-->
          <div>
          </div>
          <div class="report-title">
            <div style="display: flex;">
              <div style="color: black" class="report-title-date" :style="{width: '20%'}">
                <el-select v-model="platformIdInOpSumListFilter.selectedOperatorList" clearable multiple filterable
                           size="mini" placeholder="请选择运营人" style="width:60%">
                  <el-option
                    v-for="item in platformIdInOpSumListFilter.operatorList"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </div>
              <div style="color: black" class="report-title-date" :style="{width:'calc(80%/8)'}"
                   v-for="(item,index) in platformIdInOpSumList.dateList" :key="index">
                <div style="display: flex;color: black;justify-content: center">
                  <div style="margin-top:1px;" v-if="index==0">
                    <el-tooltip content='今日数据每小时更新' :placement="top">
                      <el-image
                        style="width: 13px; height: 13px"
                        :src="images"
                        :fit="fit">
                      </el-image>
                    </el-tooltip>
                  </div>
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
          <!-- 数值-->
          <div v-for="(operatorNameItem,operatorNameItemIndex) in platformIdInOpSumList.data"
               :key="operatorNameItemIndex" v-if="operatorEnableOfPlatformIdInOpSumListFilter(operatorNameItem.name)">
            <div
              :style="(operatorNameItemIndex == 0)?'display: flex;background-color: #f9f8cf':'display: flex;margin-top: 20px;color: black;background-color: #f9f8cf'">
              <div
                style="width: 20%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8">
                {{ '运营人：' + operatorNameItem.name }}
              </div>
              <div
                style="width: 10%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
                class="cost-offer-border" :key="operatorNameItemTotalIndex"
                v-for="(operatorNameItemTotal,operatorNameItemTotalIndex) in operatorNameItem.dateTotalList ">
                {{ refinedNumberView(operatorNameItemTotal) }}
              </div>
            </div>

            <div v-for="(offerNameItem,offerNameItemIdx) in operatorNameItem.data">
              <div
                :style="(offerNameItemIdx == 0)?'display: flex;background-color: #aed994':'display: flex;margin-top: 20px;color: black;background-color: #aed994'">
                <div
                  style="width: 20%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8">
                  {{ '订单：' + offerNameItem.name }}
                </div>
                <div
                  style="width: 10%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
                  class="cost-offer-border" :key="offerNameItemTotalIndex"
                  v-for="(offerNameItemTotal,offerNameItemTotalIndex) in offerNameItem.dateTotalList ">
                  {{ refinedNumberView(offerNameItemTotal) }}
                </div>
              </div>
              <div v-for="(platformItem,platformItemIndex) in offerNameItem.data" :key="platformItemIndex">
                <div
                  :style="(platformItemIndex == 0)?'display: flex;background-color: #e6e6e6':'display: flex;margin-top: 20px;color: black;background-color: #e6e6e6'">
                  <div
                    style="width: 20%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8">
                    {{ '媒体：' + getPlatformName(platformItem.name) }}
                  </div>
                  <div
                    style="width: 10%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
                    class="cost-offer-border" :key="platformTotalIndex"
                    v-for="(platformItemTotal,platformItemTotalIndex) in platformItem.dateTotalList ">
                    {{ refinedNumberView(platformItemTotal) }}
                  </div>
                </div>
                <div v-for="(platformIdItem,platformIdItemIdx) in platformItem.data">
                  <div style="display: flex">
                    <div
                      style="width: 20%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8">
                      {{ platformIdItem.accountName }}
                    </div>
                    <div
                      style="width: 10%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
                      class="cost-offer-border" :key="platformIdItemTotalIndex"
                      v-for="(platformIdItemTotal,platformIdItemTotalIndex) in platformIdItem.dateTotalList ">
                      {{ refinedNumberView(platformIdItemTotal) }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 总计-->
          <div style="display: flex;margin-top: 20px;color: black;background-color: #66abd9"
               v-if="false && (platformIdInOpSumListFilter.selectedOperatorList.length == 0)">
            <div
              style="width: 20%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
              class="report-title-date" :style="{width: '20%'}" v-text=" '总计'"></div>
            <div
              style="width: 10%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
              class="report-bottom-data" :style="{width:'calc(80%/8)'}"
              v-for="(item,index) in platformIdInOpSumList.dateTotalList" :key="index">{{ refinedNumberView(item) }}
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="订单-运营人" name="opInOfferSum" v-loading="loading">
        <div class="report">
          <!-- 标题-->
          <div>
          </div>
          <div class="report-title">
            <div style="display: flex;">
              <div style="color: black" class="report-title-date"
                   :style="{width:index == 0 ? '15%' : 'calc(80%/8)', textAlign: index === 0?'center':'left'}"
                   v-for="(item,index) in opInOfferSumList.dateList" :key="index">
                <div style="display: flex;color: black;justify-content: center;padding: 0px">
                  <div v-if="index==0">订单运营人</div>
                  <div style="margin-top:1px;" v-if="index==1">
                    <el-tooltip content='今日数据每小时更新' :placement="top">
                      <el-image
                        style="width: 13px; height: 13px"
                        :src="images"
                        :fit="fit">
                      </el-image>
                    </el-tooltip>
                  </div>
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
          <!-- 数值-->
          <div v-for="(item,index) in opInOfferSumList.opInOffer" :key="index">
            <!--优化师-->
            <div style="margin-top: 20px;color: black;background-color: #f9f8cf">
              <div style="display: flex;padding: 0">
                <div
                  style="width: 15%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top:1px solid #E8E8E8;color: #00a2ff">
                  {{ item.label }}
                </div>
                <div class="cost-offer-border" :style="{borderRight: i== 8?' 1px solid #E8E8E8':'1px solid white'}"
                     style="border-bottom: 1px solid #E8E8E8;border-top:1px solid #E8E8E8 ; " :key="i"
                     v-for="(it,i) in item.value.opDateTotalList ">
                  {{ refinedNumberView(it) }}
                </div>
              </div>
            </div>
            <!--offer-->
            <div v-for="(ite,ind) in item.value.nameList" :key="ind" style="display: flex;padding: 0;">
              <div
                style="width: 15%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8">
                {{ ite }}
              </div>
              <div :style="{borderRight: i== 8?' 1px solid #E8E8E8':'1px solid white'}" class="cost-offer-border"
                   style="border-bottom: 1px solid #E8E8E8;" :key="i" v-for="(it,i) in item.value.costList[ind] ">
                {{ refinedNumberView(it) }}
              </div>
            </div>
          </div>
          <!-- 总计-->
          <div style="display: flex;margin-top: 3px;padding: 0;font-weight: bold;">
            <div class="report-bottom-data"
                 :style="{width:index === 0 ? '15%' : 'calc(80%/8)', textAlign: 'center'}"
                 v-for="(item,index) in opInOfferSumList.dateTotalList" :key="index">{{ refinedNumberView(item) }}
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="客户-订单" name="salesManagerCustomerOfferSum" v-loading="loading">
        <div class="report">
          <!-- 标题-->
          <div>
          </div>
          <div class="report-title">
            <div style="display: flex;">
              <div style="color: black" class="report-title-date" :style="{width: '20%'}" v-text=" '客户订单'"></div>
              <div style="color: black" class="report-title-date" :style="{width:'calc(80%/8)'}"
                   v-for="(item,index) in salesManagerCustomerOfferSumList.dateList" :key="index">
                <div style="display: flex;color: black;justify-content: center;">
                  <div style="margin-top:1px;" v-if="index==0">
                    <el-tooltip content='今日数据每小时更新' :placement="top">
                      <el-image
                        style="width: 13px; height: 13px"
                        :src="images"
                        :fit="fit">
                      </el-image>
                    </el-tooltip>
                  </div>
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
          <!-- 数值-->
          <div v-for="(salesManagerItem,salesManagerItemIndex) in salesManagerCustomerOfferSumList.data"
               :key="salesManagerItemIndex">
            <div
              :style="(salesManagerItemIndex == 0)?'display: flex;background-color: #f9f8cf':'display: flex;margin-top: 20px;color: black;background-color: #f9f8cf'">
              <div
                style="width: 20%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8">
                {{ '销售经理：' + salesManagerItem.name }}
              </div>
              <div
                style="width: 10%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
                class="cost-offer-border" :key="salesManagerItemTotalIndex"
                v-for="(salesManagerItemTotal,salesManagerItemTotalIndex) in salesManagerItem.dateTotalList ">
                {{ refinedNumberView(salesManagerItemTotal) }}
              </div>
            </div>

            <div v-for="(customerItem,customerItemIdx) in salesManagerItem.data">
              <div
                :style="(customerItemIdx == 0)?'display: flex;background-color: #aed994':'display: flex;margin-top: 20px;color: black;background-color: #aed994'">
                <div
                  style="width: 20%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8">
                  {{ '客户：' + customerItem.name }}
                </div>
                <div
                  style="width: 10%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
                  class="cost-offer-border" :key="customerItemTotalIndex"
                  v-for="(customerItemTotal,customerItemTotalIndex) in customerItem.dateTotalList ">
                  {{ refinedNumberView(customerItemTotal) }}
                </div>
              </div>
              <div v-for="(offerItem,index) in customerItem.data" :key="index">
                <div style="display: flex;">
                  <div
                    style="width: 20%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8">
                    {{ offerItem.name }}
                  </div>
                  <div
                    style="width: 10%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
                    class="cost-offer-border" :key="offerItemTotalIndex"
                    v-for="(offerItemTotal,offerItemTotalIndex) in offerItem.dateTotalList ">
                    {{ refinedNumberView(offerItemTotal) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 总计-->
          <div style="display: flex;margin-top: 20px;color: black;background-color: #66abd9">
            <div
              style="width: 20%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
              class="report-title-date" :style="{width: '20%'}" v-text=" '总计'"></div>
            <div
              style="width: 10%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
              class="report-bottom-data" :style="{width:'calc(80%/8)'}"
              v-for="(item,index) in salesManagerCustomerOfferSumList.dateTotalList" :key="index">
              {{ refinedNumberView(item) }}
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="媒体-订单" name="platformOfferSum" v-loading="loading">
        <div class="report">
          <!-- 标题-->
          <div>
          </div>
          <div class="report-title">
            <div style="display: flex;">
              <div style="color: black" class="report-title-date" :style="{width: '20%'}" v-text=" '媒体订单'"></div>
              <div style="color: black" class="report-title-date" :style="{width:'10%'}"
                   v-for="(item,index) in platformOfferSumList.dateList" :key="index">
                <div style="display: flex;color: black; justify-content: center;">
                  <div style="margin-top:1px;" v-if="index==0">
                    <el-tooltip content='今日数据每小时更新' :placement="top">
                      <el-image
                        style="width: 13px; height: 13px"
                        :src="images"
                        :fit="fit">
                      </el-image>
                    </el-tooltip>
                  </div>
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
          <!-- 数值-->
          <div v-for="(platformItem,platformItemIndex) in platformOfferSumList.data" :key="platformItemIndex">
            <div
              :style="(platformItemIndex == 0)?'display: flex;background-color: #f9f8cf':'display: flex;margin-top: 20px;color: black;background-color: #f9f8cf'">
              <div
                style="width: 20%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8">
                {{ getPlatformName(platformItem.name) }}
              </div>
              <div
                style="width: 10%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
                class="cost-offer-border" :key="platformItemTotalIndex"
                v-for="(platformItemTotal,platformItemTotalIndex) in platformItem.dateTotalList ">
                {{ refinedNumberView(platformItemTotal) }}
              </div>
            </div>

            <div v-for="(offerItem,index) in platformItem.data" :key="index">
              <div style="display: flex;">
                <div
                  style="width: 20%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8">
                  {{ offerItem.name }}
                </div>
                <div
                  style="width: 10%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
                  class="cost-offer-border" :key="offerItemTotalIndex"
                  v-for="(offerItemTotal,offerItemTotalIndex) in offerItem.dateTotalList ">
                  {{ refinedNumberView(offerItemTotal) }}
                </div>
              </div>
            </div>
          </div>
          <!-- 总计-->
          <div style="display: flex;margin-top: 20px;color: black;background-color: #66abd9">
            <div
              style="width: 20%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
              class="report-title-date" :style="{width: '20%'}" v-text=" '总计'"></div>
            <div
              style="width: 10%;text-align: center;border-bottom: 1px solid #E8E8E8;border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;border-right: 1px solid #E8E8E8"
              class="report-bottom-data" :style="{width:'calc(80%/8)'}"
              v-for="(item,index) in platformOfferSumList.dateTotalList" :key="index">{{ refinedNumberView(item) }}
            </div>
          </div>
        </div>
      </el-tab-pane>

    </el-tabs>
    <div newPageLink></div>
    <el-drawer
      title="定制报表"
      :visible.sync="exportSwitch"
      direction="rtl"
      :modal="true"
      :append-to-body="true"
      :wrapperClosable="false">
      <el-divider></el-divider>
      <cs-drawer-container>
        <div style="width: 90%;margin: 0 auto">
          <el-row :gutter="20">
            <el-col :span="12"><p>导出纬度</p></el-col>
            <el-col :span="20">
              <el-radio-group v-model="radio">
                <el-radio :label="0">分天</el-radio>
                <el-radio :label="1">汇总</el-radio>
              </el-radio-group>
            </el-col>
            <el-col>
              <p>导出字段</p>
            </el-col>
          </el-row>
          <el-checkbox-group v-model="checkList" style="display: flex;flex-direction: column;">
            <el-checkbox v-for="item in column" :label="item.label" :checked="item.check" :key="item.value"
                         :disabled="item.disabled">{{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div slot="bottom">
          <el-button type="primary" size="mini" :loading="btnLoading" @click="exportAccountSpend">开始导出</el-button>
          <el-button size="mini" class="cancel-button" @click="exportSwitch = false">取消</el-button>
        </div>
      </cs-drawer-container>
    </el-drawer>
  </basic-container>
</template>

<script>
import {
  getCostReport,
  getCostOfferInOpReport,
  getCostOpInOfferReport,
  getCostPlatformIdInOpReport,
  getCostSalesManagerCustomerOfferReport,
  getCostPlatformOfferReport,
  selecterror
} from "@/api/business/account";
import {getPlatform} from "@/api/business/offer";
import Moment from 'moment'
import {mapGetters} from "vuex";
import {OC_LOGIN_URL} from "@/const/urlConst"
import {getToken} from '@/util/auth';
import {generateTable} from '@/util/util';
import {genTokenKey} from '@/api/user';
import website from "@/config/website";
import OperatorAccount from "@/views/dataReport/operatorAccount";
import Accountoperator from "@/views/dataReport/accountoperator";
import CustomerAccount from "@/views/dataReport/customerAccount";
import {transformObjectList, findObject} from "@/util/util";
import {getSysDictList} from "@/api/system/dict";
import {exportAccountSpend} from "@/api/business/account";
import {creativeExport} from "../../api/offer/creative";
import CsDrawerContainer from "@/components/CsDrawerContainer/CsDrawerContainer";

export default {
  name: "costReport",
  components: {CustomerAccount, Accountoperator, OperatorAccount, CsDrawerContainer},
  data() {
    return {
      color: 'red',
      images: '/img/icon/error.png',
      operator: [],
      radio: 0,
      exportSwitch: false,
      checkList: [],
      platformList: [],
      timezone: "",
      activeName: 'offer',
      offerList: {},
      operatorList: {},
      offerInOpSumList: {},
      opInOfferSumList: {},
      platformIdInOpSumList: {},
      platformIdInOpSumListFilter: {
        operatorList: [],
        selectedOperatorList: [],
      },
      salesManagerCustomerOfferSumList: {},
      platformOfferSumList: {},
      loading: false,
      btnLoading: false,
      refreshDate: null,
      lists: [],
      column: [
        {
          label: "订单",
          value: "offerName",
          disabled: true,
          check: true
        },
        {
          label: "媒体",
          value: "platform",
          disabled: true,
          check: true
        },
        {
          label: "账户",
          value: "accountId",
          disabled: true,
          check: true
        },
        {
          label: "客户",
          value: "customerName",
          disabled: true,
          check: true
        },
        {
          label: "账户运营人",
          value: "operatorName",
          disabled: true,
          check: true
        },
        {
          label: "销售经理",
          value: "salesManagerName",
          disabled: true,
          check: true
        },
        {
          label: "客户经理",
          value: "customerManagerName",
          disabled: true,
          check: true
        },
        {
          label: "花费",
          value: "spend",
          disabled: true,
          check: true
        },
        {
          label: "报告时间(过去60天)",
          value: "reportDate",
          disabled: true,
          check: true
        },
      ]
    }
  },
  created() {
    this.operator.dateList = []
    getSysDictList('platforms,timezone').then(map => {
      this.platformList = map['platforms'];
      let timezoneList = map['timezone'];
      let currentTimezoneOfUpdateData = 2 - (new Date()).getUTCHours();
      if (currentTimezoneOfUpdateData > 12) {
        currentTimezoneOfUpdateData -= 24;
      }
      if (currentTimezoneOfUpdateData < -12) {
        currentTimezoneOfUpdateData += 24;
      }
      timezoneList.map(item => {
        if (currentTimezoneOfUpdateData == item.dictValue) {
          this.timezone = item.dictKey
        }
      })
    });
    this.refreshDate = new Date();
    this.getOfferCost(0);
    console.log('local hours:' + (new Date()).getHours());
    console.log('utc hours:' + (new Date()).getHours() - (new Date()).getUTCHours());

  },
  computed: {
    ...mapGetters(["roles"]),
  },
  methods: {
    /**
     * 根据昨日的数据区分颜色
     */
    yesterdayColor(number) {
      if (number >= 4000) {
        return '#66bb7c'
      }
      if (number >= 1000 && number < 4000) {
        return '#aed994'
      }
      if (number < 1000 && number >= 100) {
        return '#e1f39b'
      }
      if (number < 100 && number >= 30) {
        return '#f9f980'
      }
      if (number < 30 && number != 0) {
        return '#f2c25c'
      }
      if (number == 0) {
        return '#f28a70'
      }
    },

    handleClick(tab) {
      this.loading = true
      this.refreshDate = new Date();
      if (tab.name === 'offer') {
        this.getOfferCost(0)
      } else if (tab.name === 'operator') {
        this.getOfferCost(1)
      } else if (tab.name === 'offerInOpSum') {
        this.getCostOfferInOpReport()
      } else if (tab.name === 'opInOfferSum') {
        this.getCostOpInOfferReport()
      } else if (tab.name === 'platformIdInOpSum') {
        this.getCostPlatformIdInOpReport()
      } else if (tab.name === 'salesManagerCustomerOfferSum') {
        this.getCostSalesManagerCustomerOfferReport()
      } else if (tab.name === 'platformOfferSum') {
        this.getCostPlatformOfferReport()
      } else if (tab.name === 'agency') {
        this.getOfferCost(6)
        // this.getCostPlatformOfferReport()
      }
    },
    getPlatformName(platform) {
      if (platform !== null) {
        for (let i = 0; i < this.platformList.length; i++) {
          if (this.platformList[i].dictKey == platform) {
            return this.platformList[i].dictValue;
          }
        }
      }
      return platform;
    },
    getOfferCost(mode) {
      this.loading = true;
      getCostReport(mode).then(res => {
        if (mode === 0) {
          this.offerList = res.data.data
          let list = []
          this.offerList.costList.map((vals, index) => {
            let key = this.offerList.offerIdList[index]
            list.push({
              offerid: key,
              value: vals
            })
          })
          this.offerList.dateList.unshift('订单')
          this.offerList.dateTotalList.unshift('总计:')

          selecterror(res.data.data.offerIdList.toString()).then((val) => {
            let offerOnwayFlag = val.data
            this.lists = []
            list.forEach((item, index) => {
              this.lists.push({
                nameList: this.offerList.nameList[index],
                offerid: item.offerid,
                value: item.value,
                open: ((offerOnwayFlag[item.offerid] == '1') ? '1' : '0')
              })
            });
          })
        } else {
          this.operatorList = res.data.data
          if (mode === 1) {
            this.operatorList.dateList.unshift('运营人')
          } else if (mode === 6) {
            this.operatorList.dateList.unshift('代理商')
          }
          this.operatorList.dateTotalList.unshift('总计:')
        }
      }).finally(() => {
        this.loading = false;
      })
    },
    getCostOfferInOpReport() {
      this.loading = true;
      getCostOfferInOpReport().then(res => {
        this.offerInOpSumList = res.data.data
        this.offerInOpSumList.dateList.unshift('')
        this.offerInOpSumList.dateTotalList.unshift('总计:')
      }).finally(() => {
        this.loading = false;
      })
    },
    getCostOpInOfferReport() {
      this.loading = true;
      getCostOpInOfferReport().then(res => {
        this.opInOfferSumList = res.data.data
        this.opInOfferSumList.dateList.unshift('')
        this.opInOfferSumList.dateTotalList.unshift('总计:')
      }).finally(() => {
        this.loading = false;
      })
    },
    getCostPlatformIdInOpReport() {
      this.loading = true;
      getCostPlatformIdInOpReport().then(res => {
        this.platformIdInOpSumList = res.data.data;
        this.initOperatorListOfPlatformIdInOpSumListFilter();
      }).finally(() => {
        this.loading = false;
      })
    },
    initOperatorListOfPlatformIdInOpSumListFilter() {
      this.platformIdInOpSumListFilter.operatorList = [];
      this.platformIdInOpSumList.data.forEach(operatorItem => {
        this.platformIdInOpSumListFilter.operatorList.push(operatorItem.name);
      });
      let newList = [];
      this.platformIdInOpSumListFilter.selectedOperatorList.forEach(item => {
        if (this.platformIdInOpSumListFilter.operatorList.includes(item)) {
          newList.push(item);
        }
      });
      this.platformIdInOpSumListFilter.selectedOperatorList = newList;
      // if(this.platformIdInOpSumListFilter.operatorList.length > 0) {
      //   this.platformIdInOpSumListFilter.selectedOperatorList.push(this.platformIdInOpSumListFilter.operatorList[0]);
      // }
    },
    operatorEnableOfPlatformIdInOpSumListFilter(operatorName) {
      if (this.platformIdInOpSumListFilter.selectedOperatorList.length == 0) {
        return true;
      }
      return this.platformIdInOpSumListFilter.selectedOperatorList.includes(operatorName);
    },
    getCostSalesManagerCustomerOfferReport() {
      this.loading = true;
      getCostSalesManagerCustomerOfferReport().then(res => {
        this.salesManagerCustomerOfferSumList = res.data.data
      }).finally(() => {
        this.loading = false;
      })
    },
    getCostPlatformOfferReport() {
      this.loading = true;
      getCostPlatformOfferReport().then(res => {
        this.platformOfferSumList = res.data.data
      }).finally(() => {
        this.loading = false;
      })
    },
    generateTableData() {
      let tableData = {
        title: null,
        headers: [],
        rowList: [],
        bottom: [],
      };
      if (this.activeName == 'offer') {
        tableData.title = {data: '订单花费-花费汇总', style: 'text-align: left; background-color: lightblue;'};
        this.offerList.dateList.forEach((date) => {
          if (date == '') {
            tableData.headers.push({data: date, style: 'text-align: right; background-color: #409eff;'});
          } else {
            tableData.headers.push({data: date, style: 'text-align: right; background-color: #409eff; width:160px;'});
          }
        });
        for (let rowIdx = 0; rowIdx < this.offerList.nameList.length; rowIdx++) {
          let row = [];
          row.push({data: this.offerList.nameList[rowIdx]});
          let rowData = this.offerList.costList[rowIdx];
          for (let colIdx = 0; colIdx < rowData.length; colIdx++) {
            let item = rowData[colIdx];
            let color = (colIdx == 0) ? this.rangeColor(this.offerList.nameList.length, rowIdx) : '';
            let style = 'text-align: right; ' + ((color == '') ? '' : ('background-color: ' + color));
            row.push({data: this.refinedNumberView(item), style: style});
          }
          tableData.rowList.push(row);
        }
        let row = [];
        for (let colIdx = 0; colIdx < this.offerList.dateTotalList.length; colIdx++) {
          let item = this.offerList.dateTotalList[colIdx];
          if (colIdx == 0) {
            row.push({data: item, style: 'text-align: left; font-weight: bold;'});
          } else {
            row.push({data: this.refinedNumberView(item), style: 'text-align: right; font-weight: bold;'});
          }
        }
        tableData.rowList.push(row);
      } else if (this.activeName == 'operator') {
        tableData.title = {data: '运营人花费-花费汇总', style: 'text-align: left; background-color: lightblue;'};
        this.operatorList.dateList.forEach((date) => {
          if (date == '') {
            tableData.headers.push({data: date, style: 'text-align: right; background-color: #409eff;'});
          } else {
            tableData.headers.push({data: date, style: 'text-align: right; background-color: #409eff; width:160px;'});
          }
        });
        for (let rowIdx = 0; rowIdx < this.operatorList.nameList.length; rowIdx++) {
          let row = [];
          row.push({data: this.operatorList.nameList[rowIdx]});
          let rowData = this.operatorList.costList[rowIdx];
          for (let colIdx = 0; colIdx < rowData.length; colIdx++) {
            let item = rowData[colIdx];
            let color = (colIdx == 0) ? this.rangeColor(this.operatorList.nameList.length, rowIdx) : '';
            let style = 'text-align: right; ' + ((color == '') ? '' : ('background-color: ' + color));
            row.push({data: this.refinedNumberView(item), style: style});
          }
          tableData.rowList.push(row);
        }
        let row = [];
        for (let colIdx = 0; colIdx < this.operatorList.dateTotalList.length; colIdx++) {
          let item = this.operatorList.dateTotalList[colIdx];
          if (colIdx == 0) {
            row.push({data: item, style: 'text-align: left; font-weight: bold;'});
          } else {
            row.push({data: this.refinedNumberView(item), style: 'text-align: right; font-weight: bold;'});
          }
        }
        tableData.rowList.push(row);
      } else if (this.activeName == 'offerInOpSum') {
        tableData.title = {data: '运营人订单花费-花费汇总', style: 'text-align: left; background-color: lightblue;'};
        this.offerInOpSumList.dateList.forEach((date) => {
          if (date == '') {
            tableData.headers.push({data: date, style: 'text-align: right; background-color: #409eff;'});
          } else {
            tableData.headers.push({data: date, style: 'text-align: right; background-color: #409eff; width:160px;'});
          }
        });
        for (let rowIdx = 0; rowIdx < this.offerInOpSumList.offerInOp.length; rowIdx++) {
          if (rowIdx == 0) {
            tableData.rowList.push([]);
          }
          let row = [];
          row.push({
            data: this.offerInOpSumList.offerInOp[rowIdx].label,
            style: 'text-align: left; background-color: #409eff;'
          });
          let rowData = this.offerInOpSumList.offerInOp[rowIdx].value.opDateTotalList;
          for (let colIdx = 0; colIdx < rowData.length; colIdx++) {
            let item = rowData[colIdx];
            let style = 'text-align: right; background-color: #409eff;';
            row.push({data: this.refinedNumberView(item), style: style});
          }
          tableData.rowList.push(row);

          for (let nameRowIdx = 0; nameRowIdx < this.offerInOpSumList.offerInOp[rowIdx].value.nameList.length; nameRowIdx++) {
            let row = [];
            row.push({
              data: this.offerInOpSumList.offerInOp[rowIdx].value.nameList[nameRowIdx],
              style: 'text-align: right;'
            });
            let rowData = this.offerInOpSumList.offerInOp[rowIdx].value.costList[nameRowIdx];
            for (let colIdx = 0; colIdx < rowData.length; colIdx++) {
              let item = rowData[colIdx];
              let color = (colIdx == 0) ? this.rangeColor(this.offerInOpSumList.offerInOp[rowIdx].value.nameList.length, nameRowIdx) : '';
              let style = 'text-align: right; ' + ((color == '') ? '' : ('background-color: ' + color));
              row.push({data: this.refinedNumberView(item), style: style});
            }
            tableData.rowList.push(row);
          }
          tableData.rowList.push([]);
        }
        let row = [];
        for (let colIdx = 0; colIdx < this.offerInOpSumList.dateTotalList.length; colIdx++) {
          let item = this.offerInOpSumList.dateTotalList[colIdx];
          if (colIdx == 0) {
            row.push({data: item, style: 'text-align: left; font-weight: bold;'});
          } else {
            row.push({data: this.refinedNumberView(item), style: 'text-align: right; font-weight: bold;'});
          }
        }
        tableData.rowList.push(row);
      } else if (this.activeName == 'opInOfferSum') {
        tableData.title = {data: '订单运营人花费-花费汇总', style: 'text-align: left; background-color: lightblue;'};
        this.opInOfferSumList.dateList.forEach((date) => {
          if (date == '') {
            tableData.headers.push({data: date, style: 'text-align: right; background-color: #409eff;'});
          } else {
            tableData.headers.push({data: date, style: 'text-align: right; background-color: #409eff; width:160px;'});
          }
        });
        for (let rowIdx = 0; rowIdx < this.opInOfferSumList.opInOffer.length; rowIdx++) {
          if (rowIdx == 0) {
            tableData.rowList.push([]);
          }
          let row = [];
          row.push({
            data: this.opInOfferSumList.opInOffer[rowIdx].label,
            style: 'text-align: left; background-color: #409eff;'
          });
          let rowData = this.opInOfferSumList.opInOffer[rowIdx].value.opDateTotalList;
          for (let colIdx = 0; colIdx < rowData.length; colIdx++) {
            let item = rowData[colIdx];
            let style = 'text-align: right; background-color: #409eff;';
            row.push({data: this.refinedNumberView(item), style: style});
          }
          tableData.rowList.push(row);

          for (let nameRowIdx = 0; nameRowIdx < this.opInOfferSumList.opInOffer[rowIdx].value.nameList.length; nameRowIdx++) {
            let row = [];
            row.push({
              data: this.opInOfferSumList.opInOffer[rowIdx].value.nameList[nameRowIdx],
              style: 'text-align: right;'
            });
            let rowData = this.opInOfferSumList.opInOffer[rowIdx].value.costList[nameRowIdx];
            for (let colIdx = 0; colIdx < rowData.length; colIdx++) {
              let item = rowData[colIdx];
              let color = (colIdx == 0) ? this.rangeColor(this.opInOfferSumList.opInOffer[rowIdx].value.nameList.length, nameRowIdx) : '';
              let style = 'text-align: right; ' + ((color == '') ? '' : ('background-color: ' + color));
              row.push({data: this.refinedNumberView(item), style: style});
            }
            tableData.rowList.push(row);
          }
          tableData.rowList.push([]);
        }
        let row = [];
        for (let colIdx = 0; colIdx < this.opInOfferSumList.dateTotalList.length; colIdx++) {
          let item = this.opInOfferSumList.dateTotalList[colIdx];
          if (colIdx == 0) {
            row.push({data: item, style: 'text-align: left; font-weight: bold;'});
          } else {
            row.push({data: this.refinedNumberView(item), style: 'text-align: right; font-weight: bold;'});
          }
        }
        tableData.rowList.push(row);
      } else if (this.activeName == 'platformIdInOpSum') {
        tableData.title = {data: '运营人账户花费-花费汇总', style: 'text-align: left; background-color: lightblue;'};
        tableData.headers.push({data: '运营人账户', style: 'text-align: center; background-color: #409eff;'});
        tableData.headers.push({data: '账号ID', style: 'text-align: center; background-color: #409eff;'});
        this.platformIdInOpSumList.dateList.forEach((date) => {
          tableData.headers.push({data: date, style: 'text-align: right; background-color: #409eff; width:160px;'});
        });
        for (let operatorNameItemIndex = 0; operatorNameItemIndex < this.platformIdInOpSumList.data.length; operatorNameItemIndex++) {
          if (operatorNameItemIndex > 0) {
            tableData.rowList.push([]);
          }
          let operatorNameItem = this.platformIdInOpSumList.data[operatorNameItemIndex];
          let row = [];
          row.push({data: '运营人：' + operatorNameItem.name, style: 'text-align: left; background-color: #f9f8cf;'});
          row.push({data: '', style: 'text-align: left; background-color: #f9f8cf;'});
          let style = 'text-align: right; background-color: #f9f8cf;';
          operatorNameItem.dateTotalList.forEach((item) => {
            row.push({data: this.refinedNumberView(item), style: style});
          });
          tableData.rowList.push(row);
          for (let offerNameItemIndex = 0; offerNameItemIndex < operatorNameItem.data.length; offerNameItemIndex++) {
            if (offerNameItemIndex > 0) {
              tableData.rowList.push([]);
            }
            let offerNameItem = operatorNameItem.data[offerNameItemIndex];
            row = [];
            row.push({data: '订单：' + offerNameItem.name, style: 'text-align: left; background-color: #aed994;'});
            row.push({data: '', style: 'text-align: left; background-color: #aed994;'});
            let style = 'text-align: right; background-color: #aed994;';
            offerNameItem.dateTotalList.forEach((item) => {
              row.push({data: this.refinedNumberView(item), style: style});
            });
            tableData.rowList.push(row);

            for (let platformItemIndex = 0; platformItemIndex < offerNameItem.data.length; platformItemIndex++) {
              if (platformItemIndex > 0) {
                tableData.rowList.push([]);
              }
              let platformItem = offerNameItem.data[platformItemIndex];
              row = [];
              row.push({
                data: '媒体：' + this.getPlatformName(platformItem.name),
                style: 'text-align: left; background-color: #e6e6e6;'
              });
              row.push({data: '', style: 'text-align: left; background-color: #e6e6e6;'});
              let style = 'text-align: right; background-color: #e6e6e6;';
              platformItem.dateTotalList.forEach((item) => {
                row.push({data: this.refinedNumberView(item), style: style});
              });
              tableData.rowList.push(row);

              for (let platformIdItemIndex = 0; platformIdItemIndex < platformItem.data.length; platformIdItemIndex++) {
                let platformIdItem = platformItem.data[platformIdItemIndex];
                row = [];
                row.push({data: platformIdItem.accountName, style: 'text-align: left;vnd.ms-excel.numberformat:@;'});
                row.push({data: platformIdItem.name, style: 'text-align: left;vnd.ms-excel.numberformat:@;'});
                let style = 'text-align: right;';
                platformIdItem.dateTotalList.forEach((item) => {
                  row.push({data: this.refinedNumberView(item), style: style});
                });
                tableData.rowList.push(row);
              }
            }
          }
        }

        tableData.rowList.push([]);
        let row = [];
        row.push({data: '总计', style: 'text-align: left; font-weight: bold;background-color: 66abd9;'});
        row.push({data: '', style: 'text-align: left; font-weight: bold;background-color: 66abd9;'});
        this.platformIdInOpSumList.dateTotalList.forEach((item) => {
          row.push({
            data: this.refinedNumberView(item),
            style: 'text-align: right; font-weight: bold;background-color: 66abd9;'
          });
        });
        tableData.rowList.push(row);
      } else if (this.activeName == 'salesManagerCustomerOfferSum') {
        tableData.title = {data: '客户订单花费-花费汇总', style: 'text-align: left; background-color: lightblue;'};
        tableData.headers.push({data: '客户订单', style: 'text-align: center; background-color: #409eff;'});
        this.salesManagerCustomerOfferSumList.dateList.forEach((date) => {
          tableData.headers.push({data: date, style: 'text-align: right; background-color: #409eff; width:160px;'});
        });
        for (let salesManagerItemIndex = 0; salesManagerItemIndex < this.salesManagerCustomerOfferSumList.data.length; salesManagerItemIndex++) {
          if (salesManagerItemIndex > 0) {
            tableData.rowList.push([]);
          }
          let salesManagerItem = this.salesManagerCustomerOfferSumList.data[salesManagerItemIndex];
          let row = [];
          row.push({data: '销售经理：' + salesManagerItem.name, style: 'text-align: left; background-color: #f9f8cf;'});
          let style = 'text-align: right; background-color: #f9f8cf;';
          salesManagerItem.dateTotalList.forEach((item) => {
            row.push({data: this.refinedNumberView(item), style: style});
          });
          tableData.rowList.push(row);
          for (let customerItemIndex = 0; customerItemIndex < salesManagerItem.data.length; customerItemIndex++) {
            if (customerItemIndex > 0) {
              tableData.rowList.push([]);
            }
            let customerItem = salesManagerItem.data[customerItemIndex];
            row = [];
            row.push({data: '客户：' + customerItem.name, style: 'text-align: left; background-color: #aed994;'});
            let style = 'text-align: right; background-color: #aed994;';
            customerItem.dateTotalList.forEach((item) => {
              row.push({data: this.refinedNumberView(item), style: style});
            });
            tableData.rowList.push(row);

            for (let offerIndex = 0; offerIndex < customerItem.data.length; offerIndex++) {
              let offerItem = customerItem.data[offerIndex];
              row = [];
              row.push({data: offerItem.name, style: 'text-align: left;'});
              let style = 'text-align: right;';
              offerItem.dateTotalList.forEach((item) => {
                row.push({data: this.refinedNumberView(item), style: style});
              });
              tableData.rowList.push(row);
            }
          }
        }

        tableData.rowList.push([]);
        let row = [];
        row.push({data: '总计', style: 'text-align: left; font-weight: bold;background-color: 66abd9;'});
        this.salesManagerCustomerOfferSumList.dateTotalList.forEach((item) => {
          row.push({
            data: this.refinedNumberView(item),
            style: 'text-align: right; font-weight: bold;background-color: 66abd9;'
          });
        });
        tableData.rowList.push(row);
      } else if (this.activeName == 'platformOfferSum') {
        tableData.title = {data: '媒体订单花费-花费汇总', style: 'text-align: left; background-color: lightblue;'};
        tableData.headers.push({data: '媒体订单', style: 'text-align: center; background-color: #409eff;'});
        this.platformOfferSumList.dateList.forEach((date) => {
          tableData.headers.push({data: date, style: 'text-align: right; background-color: #409eff; width:160px;'});
        });
        for (let platformItemIndex = 0; platformItemIndex < this.platformOfferSumList.data.length; platformItemIndex++) {
          if (platformItemIndex > 0) {
            tableData.rowList.push([]);
          }
          let platformItem = this.platformOfferSumList.data[platformItemIndex];
          let row = [];
          row.push({
            data: this.getPlatformName(platformItem.name),
            style: 'text-align: left; background-color: #f9f8cf;'
          });
          let style = 'text-align: right; background-color: #f9f8cf;';
          platformItem.dateTotalList.forEach((item) => {
            row.push({data: this.refinedNumberView(item), style: style});
          });
          tableData.rowList.push(row);
          for (let offerItemIndex = 0; offerItemIndex < platformItem.data.length; offerItemIndex++) {
            let offerItem = platformItem.data[offerItemIndex];
            row = [];
            row.push({data: offerItem.name, style: 'text-align: left;'});
            let style = 'text-align: right;';
            offerItem.dateTotalList.forEach((item) => {
              row.push({data: this.refinedNumberView(item), style: style});
            });
            tableData.rowList.push(row);
          }
        }

        tableData.rowList.push([]);
        let row = [];
        row.push({data: '总计', style: 'text-align: left; font-weight: bold;background-color: 66abd9;'});
        this.platformOfferSumList.dateTotalList.forEach((item) => {
          row.push({
            data: this.refinedNumberView(item),
            style: 'text-align: right; font-weight: bold;background-color: 66abd9;'
          });
        });
        tableData.rowList.push(row);
      }
      return tableData;
    },
    exportData() {
      let tableData = this.generateTableData();
      // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
      let html = "<html><head><meta charset='utf-8' /></head><body>" + generateTable(tableData.title, tableData.headers, tableData.rowList, tableData.bottom) + "</body></html>";
      // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
      let blob = new Blob([html], {type: "application/vnd.ms-excel"});
      let a = document.getElementById("exportLink");
      // 利用URL.createObjectURL()方法为a元素生成blob URL
      a.href = URL.createObjectURL(blob);
      // 设置文件名
      let date = Moment(this.refreshDate).format('YYYYMMDDHHmmss')
      a.download = tableData.title.data + '_' + date + '.xls';
      a.click();
    },
    getTokenKeyInfo(offerId, type) {
      if (type == 'offer') {
        return JSON.stringify({offerId: offerId});
      }
      return '';
    },
    openOcPage(offerId, type) {
      let ocTokenKey = '';
      let headers = {};
      headers[website.tokenHeader] = getToken();
      genTokenKey({
        sync: true,
        headers: headers,
        info: this.getTokenKeyInfo(offerId, type),
        success: (data) => {
          ocTokenKey = data.tokenKey;
        },
        error: () => {
        }
      });
      if (ocTokenKey == '') {
        this.$message.error('获取信息错误，无法正确跳转到订单中心');
        return;
      }
      let eleList = document.querySelectorAll('div[newPageLink]');
      let content = eleList[0];
      let linkEle = document.createElement("a");
      content.appendChild(linkEle);

      // 利用URL.createObjectURL()方法为a元素生成blob URL
      linkEle.target = '_blank';
      linkEle.href = OC_LOGIN_URL + '?tokenKey=' + ocTokenKey;
      linkEle.click();
      linkEle.remove();
    },
    //打开 安卓,ios链接
    openUrl(url) {
      if (url.startsWith('http://') || url.startsWith('https://')) {
        window.open(url, '_blank')
      } else {
        window.open('https://' + url, '_blank')
      }
    },
    //定制报表导出
    exportAccountSpend() {
      let groupList = [];
      this.column.map(item => {
        if (item.check) {
          groupList.push(item.value)
        }
      })
      this.btnLoading = true;
      let data = {};
      data.type = this.radio;
      data.groupList = groupList.join(',');
      exportAccountSpend(data).then(res => {
        this.btnLoading = false;
        let filename = window.decodeURI(res.headers['content-disposition'].split('=')[1])
        let url = window.URL.createObjectURL(new Blob([res.data]))
        let link = document.createElement("a")
        link.style.display = "none"
        link.href = url
        link.download = filename
        document.body.appendChild(link)
        link.click()
      }).catch(e => {
        this.btnLoading = false;
      });
    },
    refinedNumberView(num) {
      let s = num.toString();
      let div = s.indexOf('.');
      let sign = (num < 0) ? '-' : '';
      let intPart = (div == -1) ? s : s.substring(0, div);
      let dotPart = (div == -1) ? '' : s.substring(div);
      let finalIntPart = '';
      while (intPart.length > 3) {
        finalIntPart = ',' + intPart.substring(intPart.length - 3) + finalIntPart;
        intPart = intPart.substring(0, intPart.length - 3);
      }
      return sign + intPart + finalIntPart + dotPart;
    },

    rangeColor(totalCount, pos) {
      //00EB00=>EBEB00=>EB0000
      if (totalCount <= 1) {
        return '#00EB00';
      } else {
        if (pos <= ((totalCount - 1) / 2)) {
          let rColor = Math.floor(0xEB * pos * 2 / (totalCount - 1));
          let sRColor = '0' + (new Number(rColor)).toString(16);
          return '#' + sRColor.substring(sRColor.length - 2) + 'EB00';
        } else {
          let gColor = 0xEB - Math.floor(0xEB * (pos * 2 - (totalCount - 1)) / (totalCount - 1));
          let sRColor = '0' + (new Number(gColor)).toString(16);
          return '#EB' + sRColor.substring(sRColor.length - 2) + '00';
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.report-title {
  background-color: #D0E7FF;
  color: white;
  padding: 0 0px;
  text-align: center;
}

.report {
  font-size: 14px;
  line-height: 28px;
  width: 100%;
}

/deep/ .report div {
  word-break: break-all;
  word-wrap: break-word;
}

.report-title-date {
  text-align: center;
  width: calc(85% / 8);
}

.report-bottom-data {
  text-align: left;
  width: calc(85% / 8);

  //& > div {
  //  justify-content: center;
  //}
}

.cost-offer-border {
  width: calc(80% / 8);
  display: flex;
  justify-content: center;
}

.cost-offer-border-left {
  width: calc(80% / 8);
  display: flex;
  justify-content: left;
}

el-tabs {
  height: 200px;
}

.red {
  background-color: red;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.report_tap {
  /deep/ .el-tabs__content {
    width: 100%;
  }
}
</style>
